<template>
    <div class="myinfo">
        <i @click="goBack" class="el-icon-arrow-left"></i>
        <div class="myinfo1" :style="myinfobg">
            <div class="perimg2">
               <img :src="this.userInfo.portraitUrl" alt="">
                <div v-if="this.userInfo.accountType==2" class="perlx2">
                    <img src="../../assets/images/qy.png" alt="">
                </div>
            </div>
            <p>
                {{ userInfo.nickName }}
                <br>
                {{ userInfo.mobileNo }}
            </p>
        </div>
        <div class="myinfo2">
            <ul>
                <li class="myinfojt">
                    <a :href="gjfcz()">
                        <b>管家服务费到期时间</b>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <b>停车到期时间</b>
                        <span></span>
                        <a href="javascript:void(0);">敬请期待</a>
                    </a>
                </li>
                <li class="myinfojt">
                    <a :href="userupdate()">
                        <b>用户信息变更</b>
                    </a>
                </li>
                <li v-if="false" class="myinfojt">
                    <a :href="myinfobind()">
                        <b>子账号绑定</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    created(){
        this.getUserInfo();
    },
    data() {
        return {
            myinfobg:{
                backgroundImage: "url(" + require("../../assets/images/perbg2.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                backgroundPosition: '50% 50%'
            }
        }
    },
    computed:{
        ...mapState({
            userInfo:state => state.personModules.userInfo
        })
    },
    methods:{
        ...mapActions({
            getUserInfo:'personModules/getUserInfo'
        }),
        gjfcz(){
            return '/chongzhi'
        },
        userupdate(){
            return '/myinfoupdate'
        },
        myinfobind(){
            return '/myinfobind'
        },
        goBack(){
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/order.scss";
.el-icon-arrow-left{
        position: fixed;
    top: 10px;
    color: white;
    z-index: 9999;
    background-color: #888;
    border-radius: 50%;
    font-size: 25px;
    left: 10px;
}
</style>

